<template lang="">
  <div class="div">
    <van-nav-bar title="首页" />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <div class="list">
      <div class="item">
        <img src="../../images/视频讲座.png" />
        <div>人才库</div>
      </div>
      <div class="item">
        <img src="../../images/视频讲座.png" />
        <div>人才库</div>
      </div>
      <div class="item">
        <img src="../../images/视频讲座.png" />
        <div>人才库</div>
      </div>
      <div class="item">
        <img src="../../images/视频讲座.png" />
        <div>人才库</div>
      </div>
      <div class="item">
        <img src="../../images/视频讲座.png" />
        <div>人才库</div>
      </div>
      <div class="item">
        <img src="../../images/视频讲座.png" />
        <div>人才库</div>
      </div>
    </div>
    <div>
      <img src="../../images/机构员工信息认证.png" class="information" />
    </div>
    <div class="professor">
      <div class="experts">
        <span class="left">专家</span>
        <div class="right">
          <span class="fz">查看更多</span
          ><img class="img" src="../../images/查看更多.png" />
        </div>
      </div>

    </div>
    <div class="photo-box-wrapper" >
      <div class="photo-box" :style="{
        'width': 3*126+2*10+'px'
      }">
        <div class="photo-item">
          <img src="../../images/组 17(6).png" />
          <div>
            张月
          </div>
        </div>
        <div class="photo-item">
          <img src="../../images/组 17(5).png" />
          <div>
            张月
          </div>
        </div>
        <div class="photo-item">
          <img src="../../images/组 17(4).png" />
          <div>
            张月
          </div>
        </div>
      </div>
    </div>
    <div>
      <div class="experts">
        <span class="left">机构</span>
        <div class="right">
          <span class="fz">查看更多</span
          ><img class="img" src="../../images/查看更多.png" />
        </div>
      </div>
      <div class="box3">
      <div>
        <div>
          <img src="../../images/组 17(1).png" />
          <div>传猛</div>
        </div>
      </div>
      <div>
        <div>
          <img src="../../images/组 17(1).png" />
          <div>传猛</div>
        </div>
      </div>
      <div>
        <div>
          <img src="../../images/组 17(1).png" />
          <div>传猛</div>
        </div>
      </div>
      <div>
        <div>
          <img src="../../images/组 17(1).png" />
          <div>传猛</div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  }
}
</script>
<style>
.photo-box-wrapper{
  width:100%;
  overflow-x: auto;
}
.photo-box{
width: auto;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
  .photo-item:not(:last-child){
    float: left;margin-right: 10px;
  }
html {
  /* padding: 0 15px; */
  width: 345px;
  box-sizing: border-box;
  margin: 0 auto;
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.item {
  display: flex;
  width: 33.33%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.van-hairline--bottom::after {
  border-bottom-width: 0px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.row {
  padding-top: 5px;
}
/* .information {
  padding-left: 15px;
} */
.professor {
  /* box-sizing: border-box; */
}
.box {
  padding: 0 !important;
  display: flex;
  width: 100%;
  overflow: auto;
  overflow-x: auto;
  justify-content: space-around;
  /* box-sizing: border-box; */
}
.experts {
  display: flex;
  justify-content: space-between;
  border-left: 2px solid #fe7003;
}
.img {
  vertical-align: middle;
}
.fz {
  font-size: 12px;
}
.box .box1 {
  margin-right: 10px;
  /* box-sizing: border-box; */
}
/* .box img:nth-child(1){
  margin-left: 10px;
} */
.box3{
  width: 375px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.box3 div:nth-child(1){
  margin-right: 10px;
}
</style>
